/**
 * Created by Administrator on 2017/5/17.
 */
/**
 * Created by Administrator on 2017/5/4.
 */
import rt from 'angular-ui-router';
import html from './index.html';
import * as d3 from 'd3';
import $ from "jquery";
export default angular.module('husband.demo',[rt])
.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('husband.allDemo', {
    url: '/allDemo',
    template:html
  });
}]).controller('allDemoController',["$scope","$http",'arcF',"chartF","treeFun",function ($scope,$http,arcF,chartF,treeFun) {
  $scope.title = 'd3一些有意思的demo';
  var pad = null,zoom,width,height;
  function init() {
    d3.select('svg').remove();
    d3.select('Canvas').remove();
    pad = d3.select('.svgContainer')
    .append('svg').append('g')
    .attr('class','container')
    ;
     zoom = d3.zoom().on('zoom',function () {
      pad.attr('transform', d3.event.transform)
    });
     width = $('svg').width();
     height = $('svg').height();

    d3.select('svg').call(zoom);
  }


  // zoom.translateBy(d3.select('svg'),width/2,height/2);
  $scope.drawArc = function () {
    init();
    var obj = d3.zoomIdentity;
    obj.x = width/2;obj.y = height/2;
    zoom.transform(d3.select('svg'),obj);
    pad.html("");
    arcF.start(pad);
  };
  $scope.drawChart = function () {
    init();
    var obj = d3.zoomIdentity;
    obj.x = width/2;obj.y = height/2;
    zoom.transform(d3.select('svg'),obj);
    pad.html("");
    console.log(chartF);
    chartF.start(pad);
  };
  $scope.drawTree = function () {
    init();
    var objs = d3.zoomIdentity;
    objs.x = 0;
    objs.y = 0;
    zoom.transform(d3.select('svg'),objs);
    pad.html("");
    treeFun.start(pad);
  };



  function canInit() {
    d3.select('svg').remove();
    d3.select('Canvas').remove();
    d3.select('.svgContainer')
    .append('canvas')
    .attr('height','1000px')
    .attr('width','1000px')
    .attr('id','demoCanvas')
    ;
  }
  $scope.drawCanvas = function () {
    canInit();
    window.requestAnimationFrame(clock);
    // var ctx = document.getElementById('demoCanvas').getContext('2d');
    // ball.draw(ctx);
  };


  function clock() {
    var now = new Date();
    var ctx = document.getElementById('demoCanvas').getContext('2d');
    ctx.save();
    ctx.clearRect(0,0,150,150);
    ctx.translate(75,75);
    ctx.scale(0.4,0.4);
    ctx.rotate(-Math.PI/2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";

    // Hour marks
    ctx.save();
    for (var i=0;i<12;i++){
      ctx.beginPath();
      ctx.rotate(Math.PI/6);
      ctx.moveTo(100,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.restore();

    // Minute marks
    ctx.save();
    ctx.lineWidth = 5;
    for (i=0;i<60;i++){
      if (i%5!=0) {
        ctx.beginPath();
        ctx.moveTo(117,0);
        ctx.lineTo(120,0);
        ctx.stroke();
      }
      ctx.rotate(Math.PI/30);
    }
    ctx.restore();

    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hr  = now.getHours();
    hr = hr>=12 ? hr-12 : hr;

    ctx.fillStyle = "black";

    // write Hours
    ctx.save();
    ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
    ctx.lineWidth = 14;
    ctx.beginPath();
    ctx.moveTo(-20,0);
    ctx.lineTo(80,0);
    ctx.stroke();
    ctx.restore();

    // write Minutes
    ctx.save();
    ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(-28,0);
    ctx.lineTo(112,0);
    ctx.stroke();
    ctx.restore();

    // Write seconds
    ctx.save();
    ctx.rotate(sec * Math.PI/30);
    ctx.strokeStyle = "#D40000";
    ctx.fillStyle = "#D40000";
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.moveTo(-30,0);
    ctx.lineTo(83,0);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0,0,10,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(95,0,10,0,Math.PI*2,true);
    ctx.stroke();
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.arc(0,0,3,0,Math.PI*2,true);
    ctx.fill();
    ctx.restore();

    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = '#325FA2';
    ctx.arc(0,0,142,0,Math.PI*2,true);
    ctx.stroke();

    ctx.restore();

    window.requestAnimationFrame(clock);

  }

  var ball = {
    x:100,
    y:100,
    vx: 5,
    vy:1,
    radius:25,
    color:'blue',
    draw :function (ctx) {
      ctx.beginPath();
      ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
      ctx.closePath();
      ctx.fillStyle = this.color;
      ctx.fill();
    }
  };



}]);
